<template>
  <div class="main">
    <section>
      <el-button type="primary" class="btn-block" @click="addOrEditCash()" v-if="rightsButtons['add']">新建</el-button>
      <el-table v-loading="loading" :data="list" element-loading-text="给我一点时间" border fit highlight-current-row>
        <el-table-column align="center" type="index" label="序号" width="60"></el-table-column>
        <el-table-column align="center" prop="title" label="主标题"></el-table-column>
        <el-table-column align="center" prop="subTitle" label="副标题"></el-table-column>
        <el-table-column align="center" prop="platform" label="渠道名称"></el-table-column>
        <el-table-column align="center" label="生效时间">
          <template slot-scope="scope">
            <span>{{scope.row.startTime}}至{{scope.row.endTime}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="updatedAt" label="最近修改时间"></el-table-column>
        <el-table-column align="center" prop="sort" label="排序"></el-table-column>
        <el-table-column align="center" prop="updatedAt" label="是否启用">
          <template slot-scope="scope">
            <span>{{scope.row.enabled===0?'否':'是'}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="210" v-if="rightsButtons['edit']">
          <template slot-scope="scope">
            <el-button type="primary" plain @click="addOrEditCash(scope.row)" v-if="rightsButtons['edit']">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.pageNum"
        :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.pageSize" background layout="total, sizes, prev, pager, next, jumper"
        :total="listTotal"></el-pagination>
    </section>
    <el-dialog :title="formData.id?'编辑':'新建'" :visible.sync="dialogCash" width="60%" @close="handleDialogClose">
      <el-form class="section-content" :rules="formRules" :model="formData" size="medium" ref="formData" label-width="150px">
        <el-form-item label="渠道：" prop="platform">
          <el-select v-model="formData.platform" placeholder="渠道" clearable>
            <el-option v-for="item in platformList" :key="item.platform" :label="item.name" :value="item.platform"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="渠道参数：" prop="cid">
          <el-input v-model="formData.cid" placeholder="渠道参数" clearable></el-input>
        </el-form-item>
        <el-form-item label="渠道标题：" prop="title">
          <el-input v-model="formData.title" placeholder="渠道标题" clearable></el-input>
        </el-form-item>
        <el-form-item label="副标题：" prop="subTitle">
          <el-input v-model="formData.subTitle" placeholder="副标题" maxlength="4" clearable></el-input>
        </el-form-item>
        <el-form-item label="生效时间：" prop="tempDateTime">
          <el-date-picker
            @change="$forceUpdate()"
            v-model="formData.tempDateTime"
            type="datetimerange"
            placeholder="选择生效时间" 
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="排序：" prop="sort">
          <el-input v-model="formData.sort" placeholder="排序" @input="formData.sort=$event.replace(/[^\d]/g,'')" clearable></el-input>
        </el-form-item>
        <el-form-item label="是否启用：">
          <el-switch
            v-model="formData.enabled"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-text="是"
            inactive-text="否"
            :active-value="1"
            :inactive-value="0">
          </el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogCash = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'b-cashback',
  data() {
    return {
      listQuery: {
        pageNum: 0,
        pageSize: 10
      },
      dialogCash: false,
      loading: true,
      listTotal: 0,
      list: [],
      platformList: [],
      formRules: {
        title: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        subTitle: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        tempDateTime: [
          { required: true, message: '不能为空', trigger: 'change' }
        ],
        platform: [
          { required: true, message: '不能为空', trigger: 'change' }
        ],
        cid: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        sort: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ]
      },
      btnLoading: false,
      formData: {
        title: '',
        tempDateTime: [],
        platform: '',
        startTime: '',
        endTime: '',
        cid: '',
        subTitle: '',
        sort: null,
        enabled: 1
      }
    }
  },
  created() {
    if (this.$store.getters.cachedViews.length === 0) {
      this.initPlatform()
      this.getList()
    }
  },
  activated() {
    this.initPlatform()
    this.getList()
  },
  methods: {
    // 初始化弹框
    handleDialogClose () {
      this.formData = {
        title: '',
        tempDateTime: [],
        platform: '',
        startTime: '',
        endTime: '',
        cid: '',
        subTitle: '',
        sort: null,
        enabled: 1
      }
      this.$nextTick(() => {
        this.$refs.formData.clearValidate()
      })
    },
    // 初始化渠道
    initPlatform () {
      this.request({
        url: '/bihs/search-platform/list',
        method: 'get'
      }).then(({data}) => {
        this.platformList = data
      }).catch(err => {
        console.log(err);
        this.platformList = []
      });
    },
    // 列表数据
    getList() {
      this.loading = true
      this.request({
        url: '/bihs/recommend/search',
        method: 'post',
        data: this.listQuery
      }).then(({data}) => {
        this.list = data.list || []
        this.listTotal = data.total || 0
        this.loading = false
      }).catch(e => {
        this.loading = false
      })
    },
    // 新增或编辑
    addOrEditCash(item) {
      this.dialogCash = true
      if (item) {
        this.formData = { ...item }
        this.$set(this.formData, 'tempDateTime', [this.formData.startTime, this.formData.endTime])
      } else {
        this.handleDialogClose()
      }
    },
    // 保存
    submit() {
      this.$refs.formData.validate(valid => {
        if (!valid) {
          return false
        }
        this.request({
          url: '/bihs/recommend/save',
          method: 'post',
          data: {
            ...this.formData,
            startTime: new Date(this.formData.tempDateTime[0]).getTime(),
            endTime: new Date(this.formData.tempDateTime[1]).getTime()
          }
        }).then(() => {
          this.$message.success('保存成功')
          this.dialogCash = false
          this.getList()
          this.btnLoading = false
        }).catch(err => {
          console.log(err)
          this.btnLoading = false
        })
      })
    },
    //切换每页条数
    handleSizeChange(value) {
      this.listQuery.pageSize = value
      this.getList()
    },
    // 切换分页
    handleCurrentChange(page) {
      this.listQuery.pageNum = page
      this.getList()
    }
  }
}
</script>

 